<div class="q">
    <div class="t">
    </div>
</div>
<style>
    .q{
        position:fixed;
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    .t{
        width: 100%;
        height: 100px;
        background-color: red;
    }
</style>
<script>
    let btn=document.querySelector(".q")
    let tt=document.querySelector(".t")
    tt.addEventListener('mousedown',function(e){
        let knx=e.pageX - btn.offsetLeft
        let kny=e.pageY - btn.offsetTop
        document.addEventListener('mousemove',move)
        function move(e){
            btn.style.left=e.pageX-knx+'px'
            btn.style.top=e.pageY-kny+'px'
        }       
        document.addEventListener('mouseup',function(){
            document.removeEventListener('mousemove',move)
        })       
    })
</script>